<!--
 * @Descripttion: 日常任务抽屉
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-01-06 08:46:38
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-06 11:18:02
-->
<template>
  <div>
    <el-drawer
      title="批次信息"
      :visible.sync="dialog.taskDrawer"
      direction="rtl"
      :with-header="false"
      size="60%"
      :modal="false"
      @close="drawerClose"
    >
      <div class="header">
        <div class="header-left">
          <div class="header-left-info">
            {{ drawerData.name }}
          </div>
          <div class="header-left-label">
            <template v-for="(item, index) in ExhibitioData">
              <el-tag
                :key="index"
                style="color: #fff"
                :color="item.color"
                size="small"
                v-if="item.enable"
              >
                {{ item.name }}
              </el-tag>
            </template>
            <!-- 标签管理 -->
            <el-popover
              placement="bottom"
              width="397"
              @hide="PopHide"
              trigger="click"
            >
              <div class="labelTitle">
                <span>标签管理</span>
              </div>
              <div class="labelSearch">
                <el-input
                  placeholder="请输入标签名称"
                  @keyup.enter.native="searchEnterFun"
                  v-model="input"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </div>
              <div class="labelContent">
                <template v-for="(item, index) in labelData">
                  <div
                    :key="index"
                    class="labelDetail"
                    @click="chioseLabel(item)"
                  >
                    <div class="labelDetail-alone">
                      <i
                        class="iconfont icon-biaoqian"
                        :style="{ color: item.color }"
                      ></i>
                      <span style="margin-left: 5px">{{ item.name }}</span>
                    </div>
                    <div class="labelDetail-chiose" v-if="item.enable">
                      <i
                        class="iconfont icon-ziyuanxhdpi"
                        style="color: #51d173"
                      ></i>
                    </div>
                  </div>
                </template>
              </div>
              <div class="labelOperation">
                <div class="labelOperation-tag" @click="addLabel">
                  <span>创建标签</span>
                </div>
                <div class="labelOperation-tag" @click="adminLabel">
                  <span>管理标签</span>
                </div>
              </div>
              <i slot="reference" class="iconfont icon-biaoqian"></i>
            </el-popover>
          </div>
        </div>
        <div class="header-right">
          <el-button
            type="primary"
            size="default"
            @click="accomplish"
            >{{ drawerData.status == "1" ? "进行中" : "已完成" }}</el-button
          >
          <el-dropdown style="margin-left: 10px">
            <el-button class="el-icon-more"></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="del"> 删除 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div class="top">
            <!-- 所属项目 -->
            <div class="project">
              <div class="top-project-title">
                <h3>所属项目</h3>
              </div>
              <div class="top-project-name">
                <div class="name">
                  {{ drawerData.taskProjectName }}
                </div>
                <div class="taskSelect">
                  {{ drawerData.taskProjectOrderName }}
                </div>
              </div>
            </div>
            <!-- 描述 -->
            <div class="top-describe">
              <div class="top-describe-header">
                <div class="top-describe-title">
                  <h3>描述</h3>
                </div>
                <div class="top-describe-add">
                  <i
                    class="iconfont icon-add addIcon"
                    @click="remarkShow = !remarkShow"
                  ></i>
                </div>
              </div>
              <div class="top-describe-remark">
                <div class="remark" v-if="remarkShow">
                  {{ drawerData.remark || "暂无描述" }}
                </div>
                <div class="addRemark" v-else>
                  <el-input
                    v-model="updateRemrk"
                    placeholder="请输入任务描述"
                    rows="4"
                    type="textarea"
                  ></el-input>
                  <div class="addRemarkBtn">
                    <el-button
                      type="primary"
                      size="default"
                      @click="remarkSubmit"
                    >
                      保存
                    </el-button>
                    <el-button
                      type="primary"
                      size="default"
                      @click="remarkShow = true"
                    >
                      取消
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 相关信息 -->
            <div class="detailinfo">
              <div class="detailInfo-header">
                <div class="detailInfo-header-title">
                  <h3>相关信息( {{ Relevantlength }} )</h3>
                </div>
                <div class="detailInfo-header-add">
                  <i class="iconfont icon-add addIcon" @click="Related"></i>
                </div>
              </div>
              <!-- 客户 -->
              <template v-for="item in customers">
                <div :key="item.id" class="taskAll">
                  <div class="task-name">
                    相关客户——<span style="color: #1267fa">
                      {{ item.name }}
                    </span>
                  </div>
                  <div class="task-right">
                    <div class="task-right-operation">
                      <el-dropdown style="margin-left: 10px">
                        <el-button class="el-icon-more"></el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="cancelGl(item)">
                            取消关联
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 联系人 -->
              <template v-for="item in contacts">
                <div :key="item.id" class="taskAll">
                  <div class="task-name">
                    相关联系人——<span style="color: #1267fa">
                      {{ item.name }}
                    </span>
                  </div>
                  <div class="task-right">
                    <div class="task-right-operation">
                      <el-dropdown style="margin-left: 10px">
                        <el-button class="el-icon-more"></el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="cancelGl(item)">
                            取消关联
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 商机 -->
              <template v-for="item in opportunitys">
                <div :key="item.id" class="taskAll">
                  <div class="task-name">
                    相关商机——<span style="color: #1267fa">
                      {{ item.name }}
                    </span>
                  </div>
                  <div class="task-right">
                    <div class="task-right-operation">
                      <el-dropdown style="margin-left: 10px">
                        <el-button class="el-icon-more"></el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="cancelGl(item)">
                            取消关联
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <!-- 子任务 -->
            <div class="subTask">
              <div class="subTask-header">
                <div class="subTask-header-title">
                  <h3>子任务( {{ subTaskList.length }} )</h3>
                </div>
                <div class="subTask-header-add">
                  <i class="iconfont icon-add addIcon" @click="newSubTask"></i>
                </div>
              </div>
              <template v-for="(item, index) in subTaskList">
                <div :key="index" class="taskAll">
                  <div class="task-name">
                    <div>
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="task-right">
                    <div class="task-right-avtar">
                      <img :src="item.avatar" alt="" />
                    </div>
                    <div class="task-right-operation">
                      <el-dropdown style="margin-left: 10px">
                        <el-button class="el-icon-more"></el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="editTask(item)">
                            编辑
                          </el-dropdown-item>
                          <el-dropdown-item @click.native="subTaskDel(item)">
                            删除
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <!-- 附件 -->
            <div class="subTask">
              <div class="subTask-header">
                <div class="subTask-header-title">
                  <h3>附件( {{ fileList.length }} )</h3>
                </div>
                <div class="subTask-header-add">
                  <el-upload
                    class="upload-demo"
                    action="#"
                    ref="upload"
                    :on-change="getFile"
                    :show-file-list="false"
                    accept=".xlsx,.xls.docx,.jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF,.doc"
                    :http-request="requestUpload"
                  >
                    <i class="iconfont icon-add addIcon"></i>
                  </el-upload>
                </div>
              </div>
              <template v-for="(item, index) in fileList">
                <div :key="index" class="taskAll">
                  <div class="task-name">
                    <div @click="preview(item)" style="cursor: pointer">
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="task-right">
                    <div class="task-right-operation">
                      <el-dropdown style="margin-left: 10px">
                        <el-button class="el-icon-more"></el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="preview(item)">
                            预览
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <a :href="item.url">下载</a>
                          </el-dropdown-item>
                          <el-dropdown-item @click.native="delFile(item)">
                            删除
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div class="footer">
            <div class="right-head">
              <div
                class="comment"
                :class="active == true ? 'active' : ''"
                @click="toggleComment"
              >
                评论
              </div>
              <div
                class="activity"
                :class="active == false ? 'active' : ''"
                @click="toggleActivity"
              >
                活动
              </div>
            </div>
            <div class="content">
              <div class="content-right" v-if="active">
                <div class="content-right-top">
                  <div v-for="(item, index) in commentList" :key="index">
                    <div class="commentTop">
                      <div class="img">
                        <img :src="item.avatar" alt="" />
                      </div>
                      <div class="nickName">
                        {{ item.userName }}
                      </div>
                      <div class="time">
                        {{ item.commentTime }}
                      </div>
                      <div class="delete" @click="delComment(item)">
                        <i class="iconfont icon-error"></i>
                      </div>
                    </div>
                    <div class="commentBottom">
                      {{ item.comment }}
                    </div>
                  </div>
                </div>
                <div class="content-right-bottom">
                  <div class="ipt">
                    <el-input
                      v-model="commentValue"
                      placeholder="请输入评论"
                      size="normal"
                      type="textarea"
                      rows="3"
                      clearable
                      maxlength="200"
                      show-word-limit
                    ></el-input>
                  </div>
                  <div class="content-right-bottom-btn">
                    <el-button type="primary" size="default" @click="comment">
                      评论
                    </el-button>
                    <el-button size="default" @click="commentValue = ''">
                      取消
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="content-left" v-else>
                <div
                  class="operation"
                  v-for="(item, index) in Operation"
                  :key="index"
                >
                  <div class="user">
                    <div class="portrait">
                      <img :src="item.avatar" alt="" />
                    </div>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.createBy"
                      placement="top"
                    >
                      <div class="name">{{ item.createBy }}</div>
                    </el-tooltip>
                  </div>
                  <div class="record">
                    <div class="time">{{ item.createTime }}</div>
                    <div class="content">
                      <div>{{ item.content }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 详细信息 -->
        <div class="right">
          <div class="detailInfo">
            <h2>详细信息</h2>
          </div>
          <div class="detailInfo-info">
            <el-form label-width="120">
              <el-form-item label="优先级">
                <span :style="levelColor(drawerData.level)">{{
                  levelStatus(drawerData.level)
                }}</span>
              </el-form-item>
              <el-form-item label="负责人">
                <img :src="drawerData.avatar" alt="" />
              </el-form-item>
              <el-form-item label="参与人">
                <div class="participate">
                  <div v-for="(item, index) in participateList" :key="index">
                    <div class="participate-img">
                      <el-tooltip
                        :content="item.userName"
                        placement="top"
                        effect="dark"
                      >
                        <img :src="item.avatar" alt="" />
                      </el-tooltip>
                    </div>
                  </div>
                  <div>
                    <img
                      src="../../../../assets/images/addPersonal.png"
                      alt=""
                      @click="addParticipants"
                    />
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="开始时间">
                {{ drawerData.startTime }}
              </el-form-item>
              <el-form-item label="结束时间">
                {{ drawerData.finishTime }}
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 新建子任务 -->
    <el-dialog
      title="创建子任务"
      :visible.sync="subtaskShow"
      width="30%"
      @close="subtaskClose"
      :modal-append-to-body="false"
    >
      <el-form
        :model="subtaskForm"
        ref="subtaskForm"
        :rules="subtaskRules"
        label-width="80px"
      >
        <el-form-item label="任务名称" style="width: 330px" prop="name">
          <el-input
            v-model="subtaskForm.name"
            placeholder="请输入任务名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="userId">
          <el-select v-model="subtaskForm.userId" placeholder="请选择负责人">
            <el-option
              v-for="item in chargerOptions"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="截止日期">
          <el-date-picker
            v-model="subtaskForm.finishTime"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="subtaskShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">创建</el-button>
      </span>
    </el-dialog>
    <!-- 预览 -->
    <el-dialog
      title="预览"
      :visible.sync="show"
      @close="previewClose"
      :fullscreen="true"
    >
      <div v-html="fileHtml" style="text-align: center"></div>
    </el-dialog>
    <el-dialog
      title="新增参与人"
      :visible.sync="participantsShow"
      width="30%"
      @close="participantsClose"
    >
      <div class="participants">
        <el-select v-model="userIds" multiple placeholder="请选择参与人">
          <el-option
            v-for="item in chargerOptions"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer">
        <el-button @click="participantsShow = false">取消</el-button>
        <el-button type="primary" @click="participantsSubmit">确定</el-button>
      </span>
    </el-dialog>
    <relevant-info
      :drawerData="businessData"
      :dialog="dialog"
      :business="business"
      :taskId="taskId"
      v-if="dialog.aboutShowEject"
    ></relevant-info>
    <!-- crm详情 -->
    <crm-info
      :dialog="dialog"
      :crmType="crmType"
      :crmInfo="crmInfo"
      v-if="dialog.crmInfoShowEject"
    ></crm-info>
    <new-task
      :dialog="dialog"
      v-if="dialog.newTaskShowEject"
      ref="addTask"
      :drawerData="drawerData"
    ></new-task>
    <!-- 创建标签 -->
    <el-dialog
      title="创建标签"
      :visible.sync="establishShow"
      width="30%"
      @close="establishClose"
    >
      <div class="labelName">标签名称</div>
      <div class="labelIpt">
        <el-input placeholder="请输入标签名称" v-model="labelValue">
          <i
            slot="prefix"
            class="el-input__icon iconfont icon-biaoqian"
            :style="color"
          ></i>
        </el-input>
      </div>
      <div class="labelColor">
        <div
          class="labelColor-alone"
          style="background: #4b8dff"
          @click="choiceColor('#4b8dff')"
        ></div>
        <div
          class="labelColor-alone"
          style="background: #ffba54"
          @click="choiceColor('#ffba54')"
        ></div>
        <div
          class="labelColor-alone"
          style="background: #ff5a5a"
          @click="choiceColor('#ff5a5a')"
        ></div>
        <div
          class="labelColor-alone"
          style="background: #705eff"
          @click="choiceColor('#705eff')"
        ></div>
        <div
          class="labelColor-alone"
          style="background: #88ff7b"
          @click="choiceColor('#88ff7b')"
        ></div>
        <div
          class="labelColor-alone"
          style="background: #ffeb67"
          @click="choiceColor('#ffeb67')"
        ></div>
        <div
          class="labelColor-alone"
          style="background: #909090"
          @click="choiceColor('#909090')"
        ></div>
      </div>
      <span slot="footer">
        <el-button @click="establishShow = false">取消</el-button>
        <el-button type="primary" @click="labelSubmit">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="标签管理"
      :visible.sync="adminLabelShow"
      width="30%"
      @close="adminLabelClose"
    >
      <div class="labelSearch">
        <el-input
          placeholder="请输入标签名称"
          @keyup.enter.native="searchEnterFun"
          v-model="input"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="labelContent">
        <template v-for="(item, index) in labelData">
          <div :key="index" class="labelDetail">
            <div class="labelDetail-alone">
              <i
                class="iconfont icon-biaoqian"
                :style="{ color: item.color }"
              ></i>
              <span style="margin-left: 5px">{{ item.name }}</span>
            </div>
            <div class="labelDetail-chiose">
              <i
                class="iconfont icon-bianji_o"
                style="margin-right: 5px; cursor: pointer"
                @click="editLabel(item)"
              ></i>
              <i
                class="iconfont icon-shanchu"
                style="cursor: pointer"
                @click="delLabel(item)"
              ></i>
            </div>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import _ from "lodash";
import {
  addDaily,
  memberList,
  taskList,
  fileList,
  finish,
  filePreview,
  delFile,
  commentList,
  commentPush,
  commentDelete,
  fileAdd,
  memberAdd,
  crmList,
  crmDelete,
  crmInfo,
  delDaily,
  updateRemark,
  detailInfo,
  labelUpdate,
  labelList,
  labelDelete,
  labelSelect,
  selectLabelsByTaskId,
  updateLabelTaskByTaskIdAndLabelIds,
  enableLabelTask,
} from "@/api/task/dailyTask";
import { OperationRecord } from "@/api/currency";
import { distriBution } from "@/api/registration";
import RelevantInfo from "./relevantInfo.vue";
import CrmInfo from "./crmInfo.vue";
import NewTask from "./newTask.vue";
export default {
  filters: {
    level: function (val) {
      if (val == 1) {
        val = "高";
      } else if (val == 2) {
        val = "中";
      } else if (val == 3) {
        val = "低";
      }
      return val;
    },
  },
  components: {
    RelevantInfo,
    CrmInfo,
    NewTask,
  },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    drawerData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      ExhibitioData: [], //展示数组
      labelId: null,
      labelData: [],
      input: "",
      adminLabelShow: false,
      establishShow: false,
      labelValue: "",
      Relevantlength: 0,
      remarkShow: true,
      updateRemrk: "",
      labelData: [
        {
          label: "重要",
          color: "#ff3040",
        },
        {
          label: "一般",
          color: "#1267fa",
        },
      ],
      color: { color: "#4b8dff" },
      crmInfo: {},
      crmType: "",
      taskId: this.drawerData.id,
      customers: [],
      contacts: [],
      opportunitys: [],
      business: false,
      participantsShow: false,
      userIds: [],
      fileHtml: "",
      show: false,
      fileList: [],
      files: [],
      active: true,
      commentValue: "",
      subtaskShow: false,
      participateList: [],
      subTaskList: [],
      chargerOptions: [],
      commentList: [],
      businessData: {},
      // 子任务表单
      subtaskForm: {
        parentId: this.drawerData.id,
        taskProjectId: this.drawerData.taskProjectId,
        taskProjectOrderId: this.drawerData.taskProjectOrderId,
        name: null,
        userId: null,
        finishTime: null,
        loop: 2,
      },
      // 新建子任务规则
      subtaskRules: {
        userId: [
          {
            required: true,
            message: "请选择负责人",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入任务名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getMemberList();
    this.getSubtaskList();
    this.getFileList();
    this.getCommentList();
    this.getCrmList();
    this.getRecord();
    this.getlabelList();
    this.getExhibitionList();
  },
  mounted() {
    document.addEventListener("click", this.bodyCloseMenus);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.bodyCloseMenus);
  },

  methods: {
    PopHide() {
      this.input = "";
    },
    // 搜索标签
    searchEnterFun() {
      this.getlabelList();
    },

    getExhibitionList() {
      labelList({
        name: this.input,
        taskId: this.drawerData.id,
      }).then((res) => {
        this.ExhibitioData = res.data;
      });
    },
    // 删除标签
    async delLabel(item) {
      const confirmResult = await this.$confirm(
        "此操作将删除该标签, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        labelDelete({
          id: item.id,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getlabelList();
        });
      }
    },
    // 编辑标签
    editLabel(item) {
      this.labelId = item.id;
      this.color.color = item.color;
      this.labelValue = item.name;
      this.establishShow = true;
    },
    // 选择展示标签
    chioseLabel(item) {
      let enable = !item.enable;
      enableLabelTask({
        labelId: item.id,
        taskId: this.drawerData.id,
        enable: enable,
      }).then((res) => {
        this.getExhibitionList();
        this.getlabelList();
      });
    },
    // 获取标签列表
    getlabelList() {
      labelList({
        name: this.input,
        taskId: this.drawerData.id,
      }).then((res) => {
        this.labelData = res.data;
      });
    },
    // 关闭标签管理
    adminLabelClose() {
      this.labelValue = "";
    },
    // 选择颜色
    choiceColor(val) {
      this.color.color = val;
    },
    // 关闭创建标签
    establishClose() {
      this.color = {
        color: "#4b8dff",
      };
      this.labelValue = "";
    },
    // 保存创建标签
    labelSubmit() {
      labelUpdate({
        name: this.labelValue,
        color: this.color.color,
        taskId: this.drawerData.id,
        id: this.labelId,
      }).then((res) => {
        this.$message.success(res.msg);
        this.establishShow = false;
        this.getlabelList();
      });
    },
    // 创建标签
    addLabel() {
      this.establishShow = true;
    },
    // 管理标签
    adminLabel() {
      this.adminLabelShow = true;
    },
    // 点击空白
    bodyCloseMenus(e) {
      let self = this;
      if (self.labelShow == true) {
        self.labelShow = false;
      }
    },
    // 获取详细信息
    getDrawerDataInfo() {
      detailInfo({ id: this.drawerData.id }).then((res) => {
        this.drawerData.remark = res.data.remark;
        this.drawerData.status = res.data.status;
      });
    },
    // 修改描述
    remarkSubmit() {
      updateRemark({
        id: this.drawerData.id,
        remark: this.updateRemrk,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getDrawerDataInfo();
        this.remarkShow = true;
      });
    },
    // 优先级颜色
    levelColor(val) {
      if (val == 1) {
        val = { backgroundColor: "#F95A5A", color: "#fff" };
      } else if (val == 2) {
        val = { backgroundColor: "#F7AD3D", color: "#fff" };
      } else if (val == 3) {
        val = { backgroundColor: "#67C33A", color: "#fff" };
      } else {
        val = { backgroundColor: "#D8D8D8 ", color: "#fff" };
      }
      return val;
    },
    // 优先级
    levelStatus(val) {
      if (val == 1) {
        val = "高";
      } else if (val == 2) {
        val = "中";
      } else if (val == 3) {
        val = "低";
      } else {
        val = "无";
      }
      return val;
    },

    // 子任务删除
    async subTaskDel(item) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该任务, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        delDaily({
          id: item.id,
        }).then((res) => {
          this.$message.success(res.msg);
          this.$parent.getList();
          this.dialog.taskDrawer = false;
        });
      }
    },
    // 删除
    del() {
      this.$parent.chargeId = this.drawerData.id;
      this.$parent.del();
    },
    getInfo(item) {
      crmInfo({
        id: item.id,
        type: item.crmType,
      }).then((res) => {
        this.crmInfo = res.data;
      });
    },
    getCrmInfo(item) {
      console.log(1);
      this.crmType = item.crmType;
      this.getInfo(item);
      this.dialog.crmInfoShowEject = true;
      this.$nextTick(function () {
        this.dialog.crmInfoShow = true;
      });
    },
    // 取消关联
    async cancelGl(item) {
      const confirmResult = await this.$confirm(
        "取消关联该任务, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消!");
      } else {
        crmDelete({
          cId: item.cId,
        }).then((res) => {
          this.$message(res.msg);
          this.getCrmList();
        });
      }
    },
    // 获取业务列表
    getCrmList() {
      this.Relevantlength = 0;
      crmList({
        taskId: this.drawerData.id,
      }).then((res) => {
        console.log(res);
        this.businessData = res.data;
        this.customers = res.data.customers;
        this.contacts = res.data.contacts;
        this.opportunitys = res.data.opportunitys;
        if (res.data.contacts !== null) {
          this.Relevantlength += res.data.contacts.length;
        }
        if (res.data.customers !== null) {
          this.Relevantlength += res.data.customers.length;
        }
        if (res.data.opportunitys !== null) {
          this.Relevantlength += res.data.opportunitys.length;
        }
        console.log(this.Relevantlength);
      });
    },
    // 关联任务
    Related() {
      this.dialog.aboutShowEject = true;
      this.$nextTick(function () {
        this.dialog.aboutShow = true;
      });
    },
    // 关闭预览
    previewClose() {
      this.fileHtml = "";
    },
    // 关闭新增参与人
    participantsClose() {
      this.userIds = [];
    },
    // 确认新增
    participantsSubmit() {
      memberAdd({
        id: this.drawerData.id,
        userIds: this.userIds,
      }).then((res) => {
        this.$message.success(res.msg);
        this.participantsShow = false;
        this.getMemberList();
      });
    },
    // 新增参与人
    addParticipants() {
      this.participantsShow = true;
      this.getChargeList();
    },
    // 删除评论
    async delComment(item) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该评论, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        commentDelete({
          taskId: this.drawerData.id,
          id: item.id,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getCommentList();
        });
      }
    },
    // 获取评论列表
    getCommentList() {
      commentList({
        id: this.drawerData.id,
      }).then((res) => {
        this.commentList = res.data;
      });
    },
    // 删除附件
    async delFile(item) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该附件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        delFile({
          id: item.id,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getFileList();
        });
      }
    },

    // 覆盖默认的上传事件
    requestUpload() {},
    getFile(file, fileList) {
      console.log(fileList);
      this.files = [];
      fileList.forEach((item) => {
        this.files.push(item.raw);
      });
      let fd = new FormData();
      this.files.forEach((item) => {
        fd.append("file", item);
      });
      fd.append("id", this.drawerData.id);
      fileAdd(fd).then((res) => {
        this.$message.success(res.msg);
        this.$refs.upload.clearFiles();
        this.files = [];
        this.getFileList();
      });
    },
    // 获取附件预览
    preview(item) {
      this.show = true;
      filePreview({
        url: item.url,
      }).then((res) => {
        this.fileHtml = res.msg;
      });
    },
    //获取负责人
    getChargeList() {
      distriBution().then((res) => {
        this.chargerOptions = res.data;
      });
    },
    // 获取附件列表
    getFileList() {
      fileList({ id: this.drawerData.id }).then((res) => {
        this.fileList = res.data;
      });
    },
    // 确认创建子任务
    onSubmit() {
      let fd = new FormData();
      fd.append("spTask", JSON.stringify(this.subtaskForm));
      addDaily(fd).then((res) => {
        this.$message.success(res.msg);
        this.subtaskShow = false;
        this.getSubtaskList();
      });
    },
    // 关闭子任务
    subtaskClose() {
      this.subtaskForm.name = null;
      this.subtaskForm.userId = null;
      this.subtaskForm.finishTime = null;
    },
    // 新增子任务
    newSubTask() {
      this.subtaskShow = true;
      this.getChargeList();
    },
    // 获取子任务
    getSubtaskList() {
      taskList({ id: this.drawerData.id, loop: 2 }).then((res) => {
        this.subTaskList = res.data;
      });
    },
    // 关闭抽屉
    drawerClose() {
      this.fileList = [];
      this.Relevantlength = 0;
      this.dialog.taskDrawerEject = false;
    },
    // 获取参与者列表
    getMemberList() {
      memberList({
        id: this.drawerData.id,
      }).then((res) => {
        this.participateList = res.data;
      });
    },
    // 评论
    comment() {
      this.commentValue = this.commentValue.replace(
        /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g,
        ""
      );
      console.log(this.commentValue);
      if (this.commentValue == "") {
        return this.$message.info("请输入评论内容");
      } else {
        commentPush({
          taskId: this.drawerData.id,
          comment: this.commentValue.trim(),
        }).then((res) => {
          this.getCommentList();
          this.commentValue = "";
        });
      }
    },
    toggleComment() {
      this.active = true;
    },
    toggleActivity() {
      this.active = false;
    },
    // 编辑任务
    editTask(item) {
      if (item.status == 2) {
        this.$message.info("该任务已完成，不可再编辑！");
      } else {
        this.dialog.newTaskShowEject = true;
        item.userId = item.userId + "";
        this.$nextTick(function () {
          this.$refs["addTask"].taskForm = item;
          if (item.fileNames !== null) {
            item.fileNames.forEach((item) => {
              this.$refs.addTask.fileList.push({
                name: item,
                url: "",
              });
            });
          }
          this.dialog.newTaskShow = true;
        });
      }
    },
    // 完成
    async accomplish() {
      const confirmResult = await this.$confirm(
        "改变此任务状态, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消!");
      } else {
        finish({
          id: this.drawerData.id,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getDrawerDataInfo();
          this.$parent.getList();
        });
      }
    },
    // 更换负责人
    changeCharge() {
      this.$parent.chargeId = this.drawerData.id;
      this.$parent.changeCharge();
    },
    // 获取操作记录
    getRecord() {
      OperationRecord({ columnId: 40, entryId: this.drawerData.id }).then(
        (res) => {
          this.Operation = res.data;
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  border-bottom: 1px solid #ececec;
  position: relative;
  .header-left {
    .header-left-info {
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 5px;
    }
    .header-left-label {
      display: flex;
      align-items: center;
      .el-tag {
        margin-right: 10px;
      }
      .labelBtn {
        cursor: pointer;
      }
    }
  }
}
.content {
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
  .left {
    padding: 0 20px;
    width: 70%;
    height: 100%;
    border-right: 1px solid #ececec;
    .top {
      width: 100%;
      height: 70%;
      border-bottom: 1px solid #ececec;
      overflow: auto;
      // 所属项目
      .project {
        margin-top: 40px;
        margin-bottom: 40px;
        .top-project-name {
          display: flex;
          .name {
            margin-right: 30px;
            width: 200px;
            height: 40px;
            border: 1px solid #d3dbeb;
            line-height: 40px;
            padding: 0 20px;
            overflow: hidden;
            /* 强制文字不换行 */
            white-space: nowrap;
            /* 超出部分显示省略号 */
            text-overflow: ellipsis;
          }
          .taskSelect {
            width: 330px;
            height: 40px;
            border: 1px solid #d3dbeb;
            line-height: 40px;
            padding-left: 20px;
          }
        }
      }
      // 描述
      .top-describe {
        margin-bottom: 40px;
        .top-describe-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .addRemarkBtn {
          margin-top: 10px;
        }
      }
      // 相关信息
      .detailinfo {
        margin-bottom: 40px;
        .detailInfo-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .taskAll {
          margin-bottom: 10px;
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 42px;
          background-color: rgba(18, 103, 250, 0.06);
          border-radius: 4px;
          .task-right {
            display: flex;
            align-items: center;
            .task-right-operation {
              /deep/ .el-button {
                border: none;
                background-color: rgba(18, 103, 250, 0);
              }
            }
          }
        }
      }
      // 子任务
      .subTask {
        margin-bottom: 40px;
        .subTask-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .taskAll {
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 42px;
          background-color: rgba(18, 103, 250, 0.06);
          border-radius: 4px;
          .task-name {
            color: #1267fa;
          }
          .task-right {
            display: flex;
            align-items: center;
            .task-right-avtar {
              width: 30px;
              height: 30px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .task-right-operation {
              /deep/ .el-button {
                border: none;
                background-color: rgba(18, 103, 250, 0);
              }
            }
          }
        }
      }
    }

    .footer {
      width: 100%;
      height: 30%;
      .right-head {
        height: 40px;
        display: flex;
        border-bottom: 1px solid #ececec;
        line-height: 40px;
        padding: 0 20px;
        .comment {
          padding: 0 10px;
        }
        .activity {
          padding: 0 10px;
          margin-left: 20px;
        }
        .active {
          color: #1267fa;
          border-bottom: 2px solid #1267fa;
        }
      }
      .content {
        .content-right {
          width: 100%;
          .content-right-top {
            padding-left: 20px;
            width: 100%;
            height: 60%;
            border-bottom: 1px solid #ececec;
            overflow: auto;
            .commentTop {
              height: 30px;
              display: flex;
              line-height: 30px;
              .delete {
                cursor: pointer;
                margin-left: 20px;
                color: red;
                display: none;
              }
              .img {
                height: 30px;
                width: 30px;
                border-radius: 30px;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                  vertical-align: middle;
                }
              }
              .nickName {
                margin: 0 20px;
              }
            }
            .commentTop:hover {
              .delete {
                display: block;
              }
            }
          }
          .commentBottom {
            margin: 10px 0 20px;
            padding-left: 10px;
          }
          .content-right-bottom {
            width: 100%;
            .ipt {
              /deep/.el-textarea__inner {
                border: none;
              }
            }
            .content-right-bottom-btn {
              text-align: right;
            }
          }
        }
        .content-left {
          width: 100%;
          height: 100%;
          overflow: auto;
          padding: 20px;
          .operation {
            display: flex;
            .user {
              display: flex;
              .portrait {
                width: 30px;
                height: 30px;
                border-radius: 30px;
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 30px;
                }
              }
              .name {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100px;
                height: 30px;
                line-height: 30px;
                margin-left: 14px;
              }
            }
            .record {
              padding-left: 21px;
              margin-left: 44px;
              border-left: 1px dotted #dbdcdb;
              .time {
                font-size: 14px;
                position: relative;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 14px;
              }
              .time::before {
                content: "";
                position: absolute;
                left: -27px;
                width: 11px;
                height: 11px;
                background-color: #000;
                transform: rotate(45deg);
              }
              .content {
                padding-top: 10px;
                padding-bottom: 10px;
              }
            }
          }
        }
      }
    }
  }
  .right {
    .detailInfo {
      margin-bottom: 20px;
    }
    width: 30%;
    height: 100%;
    padding: 20px;

    img {
      width: 30px;
      height: 30px;
    }
    span {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 30px;
    }
    .participate {
      display: flex;
      flex-wrap: wrap;
      .participate-img {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        overflow: hidden;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.addIcon {
  color: #1267fa;
  cursor: pointer;
}
.el-popover {
  .labelTitle {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2b2b2b;
    margin-bottom: 10px;
  }
  .labelContent {
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #ececec;
    overflow: auto;
    .labelDetail {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .labelDetail-alone {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
    }
  }
  .labelOperation {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1267fa;
    .labelOperation-tag {
      margin-top: 20px;
      span {
        cursor: pointer;
      }
    }
  }
}
.labelName {
  margin-bottom: 10px;
}
.labelColor {
  display: flex;
  .labelColor-alone {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin-right: 6px;
    margin-top: 16px;
  }
}
.labelContent {
  width: 100%;
  height: 150px;
  border-bottom: 1px solid #ececec;
  overflow: auto;
  .labelDetail {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .labelDetail-alone {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  }
}
/deep/ .el-tag--small {
  line-height: 0.125rem;
}
</style>